<!doctype html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>条纹立体阴影条纹字</title>
  <!--  <link rel="stylesheet" href="./styles/index.css">-->
</head>
<style>
  div {
    font-family: Times New Roman, "serif";
    position: relative;
    font-size: 30vmin;
    line-height: 40vmin;
    margin: 30vmin auto;
    text-align: center;
    text-shadow: 4px 4px 1px #333;
  }
  div::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 白色和透明色的交替条纹覆盖文字 */
    background-image: linear-gradient(-45deg, #fff 0%, #fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent 100%);
    background-size: 6px 6px;
    z-index: 1;
  }
  div::after {  /* 覆盖渐变条纹 */
    position: absolute;
    /*
      读取元素自定义属性(data-name)的值，相当于：
      content: "Solid Shadow Word";
    */
    content: attr(data-name);
    top: -4px;
    left: -2px;
    right: 6px;
    bottom: 6px;
    color: #333;
    z-index: 2;
    text-shadow: 3px 3px #fff;
  }

</style>
<body>
<ul>
  <li>借用了元素的两个伪元素</li>
  <li>伪元素可以通过 attr 读取元素属性</li>
  <li>通过生成白色->透明色的多重线性渐变叠加在黑色之上来实现条纹效果</li>
</ul>
<div data-name="Solid Shadow Word">Solid Shadow Word</div>
</body>
</html>